<template>
  <Modal
    class="custom-modal"
    :value="value"
    :footer-hide="true"
    :title="title"
    :width="width"
    :closable="closable"
    :mask-closable="maskClosable"
    :transfer="transfer"
    @on-cancel="hideModal">
    <div v-show="isReturn" class="custom-modal-return" @click="returnClick">
      <span class="iconfont icon-Return"></span>
    </div>
    <slot />
    <div v-if="!isCustomFooter" class="custom-modal-footer">
      <div class="custom-modal-footerBtn">
        <CustomButton
          type="primary"
          :loading="loading"
          @click="save">{{buttonText}}</CustomButton>
      </div>
      <div class="custom-modal-footerBtn">
        <CustomButton
          type="text-primary"
          :disabled="loading"
          @click="hideModal">关闭</CustomButton>
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  emits: ['on-ok', 'on-cancel', 'input', 'returnClick'],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    isCustomFooter: {
      type: Boolean,
      default: false
    },
    isReturn: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: 520
    },
    transfer: {
      type: Boolean,
      default: true
    },
    closable: {
      type: Boolean,
      default: true
    },
    maskClosable: {
      type: Boolean,
      default: false
    },
    loadingText: {
      type: String,
      default: '保存中'
    },
    commitText: {
      type: String,
      default: '保存'
    }
  },
  computed: {
    buttonText () {
      return this.loading ? this.loadingText : this.commitText
    }
  },
  data () {
    return {
      loading: false
    }
  },
  methods: {
    showLoading () {
      this.loading = true
    },
    hideLoading () {
      this.loading = false
    },
    save () {
      this.$emit('on-ok')
    },
    hideModal () {
      if (this.loading) {
        return
      }

      this.$emit('input', false)
      this.$emit('on-cancel')
    },
    returnClick () {
      this.$emit('returnClick')
    }
  }
}
</script>

<style lang="scss">
  @import 'common/scss/color';

  .custom-modal {
    &.ivu-modal {
      border: 8px solid $Color-border;
      .ivu-modal-content {
        border-radius: 0;
        .ivu-modal-close {
          > i {
            color: #748CA4;
            top: -6px;
            &:hover {
              color: $Color-text;
            }
          }
        }
        .ivu-modal-header {
          background-color: white;
          border-bottom: 1px solid $Color-border;
          padding: 9px 16px;
          .ivu-modal-header-inner {
            color: $Color-text;
          }
        }
        .ivu-modal-body {
          padding: 0;
          background-color: white;
          .custom-modal-return {
            position: absolute;
            right: 43px;
            top: 5px;
            z-index: 1;
            cursor: pointer;
            > .iconfont {
              font-size: 18px;
              font-weight: bold;
              color: #748CA4;
              &:hover {
                color: $Color-text;
              }
            }
          }
          .custom-modal-footer {
            padding: 20px 0;
            display: flex;
            justify-content: center;
            .custom-modal-footerBtn {
              margin-right: 15px;
              &:nth-last-of-type(1) {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
</style>
